<template>
  <div class='u-costSelectListDialog'>
    <el-dialog ref='dialog'
               :title="`${title}的收支项`"
               :visible.sync="dialogVisible"
               :before-close="() => {this.dialogVisible = false}"
    >
      <a-table :data='data' :cols='tableKeys'>
        <el-table-column align="center" label="操作" width='180'>
          <template slot-scope="scope">
            <div>
              <i class='el-icon-close' @click='remove(scope.$index, scope.row.id)'></i>
            </div>
          </template>
        </el-table-column>
      </a-table>
      <div style='padding-top: 15px;'>
        <el-button type='primary'>添加项目</el-button>
        <el-button @click="addProject">确定</el-button>
        <el-button @click="dialogVisible=false">关闭</el-button>
      </div>
    </el-dialog>
    <lx-dialog ref='lxDialog'/>
  </div>
</template>

<script>
  import lxDialog from './lxDialog'

  export default {
    name: 'u-costSelectListDialog',

    props: ['id', 'title'],

    components: {
      lxDialog
    },
    data() {
      return {
        dialogVisible: false,
        data: [],
        tableKeys: [
          {prop: 'name', label: '项目名称', minWidth: '100'},
          {prop: 'type', label: '收支类别', minWidth: '100'}
        ],
        isAdd: true,
        ifRequesting: false,
        aCostId: ''
      }
    },

    methods: {
      async getData() {
        const {code, data} = await this.$api.inventGetBillCosts({aBillId: this.id})
        if (code === 0) {
          this.data = data.list
        }
      },

      $show() {
        this.getData()
        this.dialogVisible = true
      },

      remove(i, id) {
        if (this.ifRequesting) return
        this.data.splice(i, 1)
        this.__messageBox({
          title: '你确认要删除该收支项目吗？',
          successCallback: async () => {
            this.ifRequesting = true
            const {code} = await this.$api.inventDeleteBillCost({aBillId: id})
            this.ifRequesting = false
            return code
          }
        })
      },
      addProject(id) {
        this.$api.inventDeleteBillCost({aBillId: id, aCostId: this.aCostId})
      }
    }
  }
</script>

<style lang='less'>

</style>
